<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>adhdForge - Memory Game</title>
        <meta name="DC.creator" content="Riaan Lehmkuhl - http://www.adhdforge.com/" />
        <meta name="DC.language" content="en" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <script src="../../js/jquery-1.5.min.js" type="text/javascript"></script>
        <script src="../../js/jquery-ui-1.8.9.min.js" type="text/javascript"></script>
        <script src="../../js/jquery.blockUI.min.js" type="text/javascript"></script>
        <script src="../../js/jquery.sizes.min.js" type="text/javascript"></script>
        <!-- script src="" type="text/javascript"></script -->
        <script type="text/javascript">
(function ($) {
    if ($.adhdForge == undefined)
        $.adhdForge = {};
    //if ($.fn.adhdForge == undefined)
    //    $.fn.adhdForge = {};
    String.format = String.prototype.format = function() {
        var i = 0;
        var s = (typeof(this) === "function" && !(i++)) ? arguments[0] : this;
        
        for (; i < arguments.length; i++) {
            var regEx = new RegExp('\\{' + i + '\\}','gm');
            s = s.replace(regEx, arguments[i]);
        }
        
        return s;
    }

    $.adhdForge.memoryGame = function(options) {
        var iconSets = {
                animals: {
                    path: "images/animals",
                    size: 46
                }
            },
            //layouts = { "3x3": { w: 3, h: 3 }, "6x3": { w: 6, h: 3 }, "6x4": { w: 6, h: 4 }, "9x4": { w: 9, h: 4 }, "9x6": { w: 9, h: 6 } },
            layouts = function(layout) {
                var s = layout,
                    ar = layout.split("x");
                return {
                    w: parseInt(ar[0]),
                    h: parseInt(ar[1]),
                    n: parseInt(ar[0]) * parseInt(ar[1]),
                    s: s,
                    o: parseInt(ar[0]) > parseInt(ar[1])
                }
            },
            settings = {
                iconSet: "animals",
                layout: "9x6",
                container: null,
                boardTemplate: "<ol class=\"memoryGame\"></ol>",
                cardTemplate: "<li class=\"{1}\"><a href=\"#\"><img src=\"{2}/{0}.png\" alt=\"\" /></a></li>"
            },
            clickData = {
                image1: null,
                done: {},
                size: function() {
                    var i = 0;
                    $.each(clickData.done, function() {
                        ++i;
                    });
                    return i;
                }
            };

        function init(options) {
            $.extend(settings, options);
        }

        function buildCard(img, idx) {
            var cssClass = "";
            //alert(settings.cardTemplate.format);
            var card = settings.cardTemplate.format(img, cssClass, iconSets[settings.iconSet].path);
            var last = (idx+1) % layouts(settings.layout).w == 0 ? 0 : 1;
            var width = 100/layouts(settings.layout).w;
            var margin = width*0.05;
            return $(card).width((width-margin) + "%")
                    .margin({ right: (margin*last) + "%" })
                    .click(function() {
                        // TODO: got VERY lazy at this point
                        var el = $(this).find("img");
                        if (el.visibility() != "hidden") {
                            if (clickData.done[el.attr("src")])
                                return false;
                            el.visibility("hidden");
                        } else {
                            el.visibility("visible");
                            if (clickData.image1 == null) {
                                clickData.image1 = el;
                            } else {
                                if (clickData.image1.attr("src") == el.attr("src")) {
                                    clickData.done[el.attr("src")] = true;
                                    var pairs = Math.floor(layouts(settings.layout).w * layouts(settings.layout).h / 2);
                                    if (clickData.size() == pairs) {
                                        alert("done!!!");
                                    } else {
                                        //alert("cool...");
                                    }
                                    clickData.image1 = null;
                                    //return true;
                                } else {
                                    var to = setTimeout(function () {
                                        el.visibility("hidden");
                                        clickData.image1.visibility("hidden");
                                        clickData.image1 = null;
                                    }, 600);
                                }
                            }
                        }
                        return true;
                    });
        }

        function randomInt(min,max) {
            return Math.floor(min+(Math.random()*(max-min)));
        }

        function buildGame(options) {
            $.extend(settings, options);
            var container = $(settings.container).empty();
            var board = $(settings.boardTemplate);
            var n = layouts(settings.layout).w * layouts(settings.layout).h;
            var zero = 0;
            if (n % 2 != 0)
                zero = Math.ceil(n / 2);
            var cards = [],
                idxs = {},
                pairs = Math.floor(n / 2);
            //alert(pairs);
            while (cards.length < (pairs*2)) {
                var r = randomInt(1, iconSets[settings.iconSet].size);
                if (idxs["ix_"+r] != null)
                    continue;
                idxs["ix_"+r] = r;
                cards.push(r, r);
                cards.sort(function() { return 0.5 - Math.random(); });
            }
            idxs = null;
            //cards.sort(function() { return 0.5 - Math.random(); });
            var ix = 0;
            for (var i = 0; i < cards.length; ++i) {
                if ((i+1) == zero) {
                    board.append(buildCard(0, ix++));
                    //continue;
                }
                board.append(buildCard(cards[i], ix++));
            }
            return container.append(board);
        }

        init(options);

        return {
            iconSets: iconSets,
            layouts: layouts,
            buildGame: buildGame
        }
    };

    $.fn.visibility = function (visibility) {
        if (visibility == null)
            return this.css("visibility");

        return this.each(function() {
            $(this).css({ "visibility": visibility });
        });
    };

    $.fn.memoryGame = function (options) {
        var game = new $.adhdForge.memoryGame(options);
        var $this = this;


        return {
            buildGame: function () {
                return $this.each(function() {
                    var settings = { container: this };
                    $.extend(settings, options);
                    game.buildGame({ container: $(this) });
                });
            }
        }
    };
    $(document).ready(function() {
        //var memoryGame = new $.adhdForge.memoryGame({layout: "6x3"});
        //memoryGame.buildGame(".memoryGame");
        //alert($("#memoryGame").adhdForge.memoryGame().buildGame);
        $("#memoryGame").memoryGame({layout: "9x6"}).buildGame();
    });
})(jQuery);
        </script>
        <link rel="stylesheet" href="../../../../css/start/jquery-ui-1.8.9.custom.css" type="text/css" media="screen" title="start" />
        <style type="text/css" media="screen, projection">
            /* http://meyerweb.com/eric/tools/css/reset/ */
            /* v1.0 | 20080212 */
            html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td { margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent; }
            body { line-height:1; }
            ol,ul { list-style:none; }
            blockquote,q { quotes:none; }
            blockquote:before,blockquote:after,q:before,q:after { content:'';content:none; }
            ins { text-decoration:none; }
            del { text-decoration:line-through; }
            table { border-collapse:collapse;border-spacing:0; }

            body {
                background: #E4E4E4 url("images/bg.png");
            }

            #memoryGame {
                width: 70%;
            }

            .memoryGame {
                list-style: none outside none;
                margin-top: 1em;
            }
            .memoryGame li { /* top right bottom left */
                float: left;
                margin: 0 auto 0.5em 0;
            }

            .memoryGame img {
                max-width: 100%;
            }

            .memoryGame li a {
                -webkit-border-radius: 4px;
                -moz-border-radius: 4px;
                border-radius: 4px;
                -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
                -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
                display: block;
                margin: 0 auto 0.5em;
                background: #FFFFFF;
            }

            .memoryGame li img {
                -webkit-border-radius: 4px;
                -moz-border-radius: 4px;
                border-radius: 4px;
                -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
                -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
                display: block;
                margin: 0 auto 0.5em;
                background: #FFFFFF;
                visibility: hidden;
            }
        </style>
    </head>
    <body>
        <div id="memoryGame"></div>
    </body>
</html>
